<template>
  <div class="por ovh" ref="scrollBox" :style="{height: height + 'px'}">
    <p class="poa t0 scroll__inner" ref="inner"
       :style="{left: left + 'px', transitionDuration: duration + 's', transitionDelay: delay + 'ms'}"><slot></slot>
    </p>
  </div>
</template>

<script>
  export default {
    name: "scroll-text",
    props: {
      // 每秒滚动长度（px）
      step: {
        type: Number | String,
        default: 20
      },
      // 滚动延时（ms）
      delay: {
        type: Number | String,
        default: 500
      }
    },
    data() {
      return {
        height: 0,
        w: 0,
        ow: 0,
        left: 0,
        duration: 0,
      }
    },
    mounted() {
      this.height = this.$refs.inner.offsetHeight;
      this.w = this.$refs.inner.offsetWidth;
      this.ow = this.$refs.scrollBox.offsetWidth;
      this.scroll();
    },
    methods: {
      scroll(stop) {
        if (stop) {
          this.duration = 0;
          setTimeout(() => {
            this.left = 0;
            setTimeout(() => this.scroll(), 1000);
          });
        } else {
          if (this.ow < this.w) {
            this.duration = (this.w - this.ow) / this.step | 0;
            setTimeout(() => {
              this.left = this.ow - this.w;
              setTimeout(() => this.scroll(true), this.duration * 1000 + this.delay);
            });
          }
        }
      },
    },
  }
</script>

<style scoped lang="less">
  .scroll__inner {
    transition-property: left;
    transition-timing-function: linear;
    white-space: nowrap;
  }
</style>
